<template>
  <FilterTable
    ref="table"
    :columns="columns"
    height="auto"
    :mergeCellMethod="objectSpanMethod"
    :onSyncTableData="syncDataHandle"
    :dataSource="dataSource"
    :isPagination="false"
    :isSelectColumn="false"
    :isColumnFilter="false"
    selectionType="single"
    :onColumnsChange="columns => (this.columns = columns)"
  ></FilterTable>
</template>
<script>
import { dataTableList } from './data.js';
export default {
  name: 'userManagement',
  data() {
    return {
      columns: this.createdTable(),
      dataSource: dataTableList,
      activeName: '',
      spanArr1: [] // 一个空的数组，用于存放每一行记录的合并数
    };
  },

  methods: {
    createdTable() {
      return [
        {
          title: '车系',
          align: 'center',
          dataIndex: 'carSeries',
          filterType: 'input'
        },
        {
          title: '指标',
          align: 'center',
          dataIndex: 'carIndex',
          filterType: 'input'
        },
        {
          title: '国内总计',
          align: 'center',
          dataIndex: 'carTotal',
          filterType: 'input'
        },
        {
          title: 'B端',
          align: 'center',
          children: [
            {
              title: '60S',
              align: 'center',
              dataIndex: 'B60S'
            },
            {
              title: '80V',
              align: 'center',
              dataIndex: 'B80V'
            }
          ]
        },
        {
          title: 'C端',
          align: 'center',
          children: [
            {
              title: '60S',
              align: 'center',
              dataIndex: 'C60S'
            },
            {
              title: '80V',
              align: 'center',
              dataIndex: 'C80V'
            },
            {
              title: 'X3Pro',
              align: 'center',
              dataIndex: 'CX3Pro'
            }
          ]
        },
        {
          title: '车型',
          align: 'center',
          children: [
            {
              title: '60S',
              align: 'center',
              dataIndex: 'model60S'
            },
            {
              title: '80V',
              align: 'center',
              dataIndex: 'model80V'
            },
            {
              title: 'X3Pro',
              align: 'center',
              dataIndex: 'model80V'
            }
          ]
        }
      ];
    },
    // 合并行
    // 处理合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (row['carSeries'] === row['carIndex']) {
        if (columnIndex === 0) {
          return [1, 2]; // 跨列
        } else if (columnIndex === 1) {
          return [0, 0]; // 第二列置空
        }
      }
      if (column.property === 'carSeries') {
        if (column.property === 'carSeries') {
          const _row = this.spanArr1[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      }
    },
    //  合并
    syncDataHandle(dataList) {
      if (!dataList.length) return;
      // 设定一个数组spanArr/contentSpanArr来存放要合并的格数，同时还要设定一个变量pos/position来记录
      this.spanArr1 = [];
      for (let i = 0; i < dataList.length; i++) {
        if (i === 0) {
          this.spanArr1.push(1);
          this.pos1 = 0;
        } else {
          // 判断当前元素与上一个元素是否相同(第1列)
          if (dataList[i].carSeries === dataList[i - 1].carSeries) {
            this.spanArr1[this.pos1] += 1;
            this.spanArr1.push(0);
          } else {
            this.spanArr1.push(1);
            this.pos1 = i;
          }
        }
      }
    }
  }
};
</script>

<style>
.el-table td {
  text-align: center !important;
}
</style>
